<template>
  <div class="">
    <el-row type="flex" justify="space-between" style="height:110px;">
      <el-col :span="24">
        <div class="each-col" @click.prevent="clickAirTemperature">
          <div class="features air-temperature">
            <div class="features-title">空气温度</div>
            <div><span class="features-value">{{this.sensorData[0].value}}</span>℃</div>
          </div>
        </div>
        <div class="each-col" @click.prevent="clickAirHumidity">
          <div class="features air-humidity">
            <div class="features-title">空气湿度</div>
            <div><span class="features-value">{{this.sensorData[1].value}}</span>%</div>
          </div>
        </div>
        <div class="each-col" @click.prevent="clickAirPressure">
          <div class="features air-pressure">
            <div class="features-title">气压</div>
            <div><span class="features-value">{{this.sensorData[2].value}}</span>Hpa</div>
          </div>
        </div>
        <div class="each-col" @click.prevent="clickLightIntensity">
          <div class="features light-intensity">
            <div class="features-title">光照强度</div>
            <div><span class="features-value">{{this.sensorData[3].value}}</span>Lux</div>
          </div>
        </div>
        <div class="each-col" @click.prevent="clickWindDirection">
          <div class="features wind-direction">
            <div class="features-title">风向</div>
            <div><span class="features-value">{{this.sensorData[4].value}}</span></div>
          </div>
        </div>
        <div class="each-col" @click.prevent="clickWindSpeed">
          <div class="features wind-speed">
            <div class="features-title">风速</div>
            <div><span class="features-value">{{this.sensorData[5].value}}</span>m/s</div>
          </div>
        </div>
        <div class="each-col" @click.prevent="clickRainFall">
          <div class="features rainfall">
            <div class="features-title">降雨量</div>
            <div><span class="features-value">{{this.sensorData[6].value}}</span>mm/min</div>
          </div>
        </div>
        <div class="each-col" @click.prevent="clickSoilTemperature">
          <div class="features soil-temperature">
            <div class="features-title">土壤温度</div>
            <div><span class="features-value">{{this.sensorData[7].value}}</span>℃</div>
          </div>
        </div>
        <div class="each-col" @click.prevent="clicSoilMoisture">
          <div class="features soil-moisture">
            <div class="features-title">土壤湿度</div>
            <div><span class="features-value">{{this.sensorData[8].value}}</span>%</div>
          </div>
        </div>
        <div class="each-col" @click.prevent="clickSoilConductivity">
          <div class="features soil-conductivity">
            <div class="features-title">土壤导电</div>
            <div><span class="features-value">{{this.sensorData[9].value}}</span>us/cm</div>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row style="height:40px;margin-top:30px;width:100%" class="display-row">
      <el-col :span="2">
        <p>请选择区域:</p>
      </el-col>
      <el-col :span="4">
        <el-select v-show="loading" v-model="value1" placeholder="请选择区域" @change="ChangeValue1">
          <el-option
            v-for="item in options1"
            :key="item"
            :label="item"
            :value="item"
          />
        </el-select>
      </el-col>
      <el-col :span="4">
        <el-select v-show="loading" v-model="value2" placeholder="请选择网关" @change="ChangeValue2">
          <el-option
            v-for="item in options2"
            :key="item.gatewayName"
            :label="item.gatewayName"
            :value="item"
          />
        </el-select>
      </el-col>
      <el-col :span="8">
        <el-button size="medium" type="primary" @click="viewHistory">历史</el-button>
        <el-button size="medium" type="primary" @click="custom">自定义</el-button>
      </el-col>
    </el-row>
    <el-row style="height:40px;margin-top:30px;width:100%" class="display-row">
      <el-col :span="10">
        <el-radio-group v-model="optionHours" @change="ChangeTimeValue">
          <el-radio label="12" border size="small">过去12h</el-radio>
          <el-radio label="24" border size="small">过去1天</el-radio>
          <el-radio label="168" border size="small">过去1周</el-radio>
          <el-radio label="720" border size="small">过去1月</el-radio>
        </el-radio-group>
      </el-col>
      <el-col :span="6.5">
        <el-date-picker v-model="timeTotime" size="small" value-format="yyyy-MM-dd HH:mm:ss" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" />
      </el-col>
      <el-col :span="4">
        <el-button size="small" @click="searchTime"><i class="el-icon-search" /></el-button>
      </el-col>
    </el-row>
    <el-row>
      <el-col id="charts" :span="24" style="height:600px;width:100%;" />
    </el-row>
  </div>
</template>
<script>
import { getAllsensorData, getSensorRegion, getSensorGateway, getSensorGatewayData } from '@/api/sensor'
import { getSensorHistoryByTime, getSensorHistoryByDate } from '@/api/sensor'

export default {
  data() {
    return {
      loading: false,
      role: '', // 获取当前登陆的角色
      host: this.$store.state.host,
      optionHours: '12',
      sensorName: '',
      unitName: '',
      timeTotime: '',
      sensorData: [],
      options1: [],
      options2: [],
      value1: '',
      value2: '',
      data: [],
      date: []
    }
  },
  mounted() {
    // this.drawchart()
  },
  created() {
    this.role = this.$store.getters.roles[0]
    const getRegionData = {
      Id: this.$store.getters.id,
      role: this.role
    }
    getSensorRegion(getRegionData).then(res => {
      this.options1 = res.data
      this.value1 = this.options1[0]

      getSensorGateway(this.value1).then(res => {
        this.options2 = res.data
        this.value2 = this.options2[0]
        setTimeout(() => {
          this.loading = true
          this.clickAirTemperature()
        }, 0)
      })
    })
    getAllsensorData().then(res => {
      const newtableData = []
      for (let i = 0; i < res.data.length; i++) {
        switch (res.data[i].sensorName) {
          case '空气温度':
            this.sensorData.push(res.data[i])
            break
          case '空气湿度':
            this.sensorData.push(res.data[i])
            break
          case '气压':
            this.sensorData.push(res.data[i])
            break
          case '光照强度':
            this.sensorData.push(res.data[i])
            break
          case '风向':
            this.sensorData.push(res.data[i])
            break
          case '风速':
            this.sensorData.push(res.data[i])
            break
          case '雨量':
            this.sensorData.push(res.data[i])
            break
          case '土壤温度':
            this.sensorData.push(res.data[i])
            break
          case '土壤湿度':
            this.sensorData.push(res.data[i])
            break
          case '土壤水分': // 土壤导电率
            this.sensorData.push(res.data[i])
            break
          case '露点':
            this.sensorData.push(res.data[i])
        }
      }
      console.log('this is sensordata', this.sensorData)
    })
  },
  methods: {
    drawchart: function(unitName) {
      //   const vm = this;
      const myChart = window.echarts.init(document.getElementById('charts'))
      // var base = +new Date(1968, 9, 3)
      // var oneDay = 24 * 3600 * 1000
      // var date = []
      // date = this.date
      // var data = this.data

      // var data = [Math.random() * 300]

      // for (var i = 1; i < 20000; i++) {
      //   var now = new Date(base += oneDay)
      //   date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'))
      //   data.push(Math.round((Math.random() - 0.5) * 20 + data[i - 1]))
      // }
      const option = {
        grid: {
          left: 60,
          right: 60
        },
        tooltip: {},
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.date
        },
        yAxis: {
          type: 'value',
          name: unitName,
          boundaryGap: [0, '100%'],
          axisLabel: {
            formatter: '{value}'
          }
        },
        series: [
          {
            name: '模拟数据',
            type: 'line',
            smooth: true,
            symbol: 'none',
            sampling: 'average',
            itemStyle: {
              color: '#188df0'
            },
            areaStyle: {
              color: new window.echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#83bff6' },
                { offset: 0.5, color: '#188df0' },
                { offset: 1, color: '#188df0' }
              ])
            },
            data: this.data
          }]
      }
      myChart.setOption(option)
    },
    changeSensor(index) {
      const active = document.getElementsByClassName('each-col')
      const feature = document.getElementsByClassName('features-value')
      for (let i = 0; i < active.length; i++) {
        active[i].className = 'each-col'
        feature[i].className = 'features-value'
      }
      active[index].className = 'each-col each-col-acitive'
      feature[index].className = 'features-value features-value-active'
    },
    ChangeValue1() {
      getSensorGateway(this.value1).then(res => {
        this.options2 = res.data
      })
    },
    ChangeValue2() {
      const SensorAddress = this.value2.gatewayAddress
      const SensorData = {
        hours: this.optionHours,
        gatewayAddress: this.value2.gatewayAddress,
        sensorName: this.sensorName
      }
      getSensorHistoryByTime(SensorData).then(res => {
        console.log(res)
      })
      getSensorGatewayData(SensorAddress).then(res => {
        for (let i = 0; i < res.data.length; i++) {
          switch (res.data[i].sensorName) {
            case '空气温度':
              this.sensorData[0] = res.data[i]
              break
            case '空气湿度':
              this.sensorData[1] = res.data[i]
              break
            case '气压':
              this.sensorData[2] = res.data[i]
              break
            case '光照强度':
              this.sensorData[3] = res.data[i]
              break
            case '风向':
              this.sensorData[4] = res.data[i]
              break
            case '风速':
              this.sensorData[5] = res.data[i]
              break
            case '降雨量':
              this.sensorData[6] = res.data[i]
              break
            case '土壤温度':
              this.sensorData[7] = res.data[i]
              break
            case '土壤湿度':
              this.sensorData[8] = res.data[i]
              break
            case '土壤导电':
              this.sensorData[9] = res.data[i]
              break
            case '土壤水分':
              this.sensorData[10] = res.data[i]
          }
        }
      })
    },
    clickAirTemperature() {
      this.changeSensor(0)
      this.sensorName = '空气温度'
      this.unitName = '空气温度(℃)'
      this.drawData('空气温度', '空气温度(℃)')
    },
    clickAirHumidity() {
      this.changeSensor(1)
      this.sensorName = '空气湿度'
      this.unitName = '空气湿度(%)'
      this.drawData('空气湿度', '空气湿度(%)')
    },
    clickAirPressure() {
      this.changeSensor(2)
      this.sensorName = '气压'
      this.unitName = '气压(hPa)'
      this.drawData('气压', '气压(hPa)')
    },
    clickLightIntensity() {
      this.changeSensor(3)
      this.sensorName = '光照强度'
      this.unitName = '光照强度(Lux)'
      this.drawData('光照强度', '光照强度(Lux)')
    },
    clickWindDirection() {
      this.changeSensor(4)
      this.sensorName = '风向'
      this.unitName = '风向()'
      this.drawData('风向', '风向()')
    },
    clickWindSpeed() {
      this.changeSensor(5)
      this.sensorName = '风速'
      this.unitName = '风速(m/s)'
      this.drawData('风速', '风速(m/s)')
    },
    clickRainFall() {
      this.changeSensor(6)
      this.sensorName = '雨量'
      this.unitName = '降雨量(mm/min)'
      this.drawData('雨量', '降雨量(mm/min)')
    },
    clickSoilTemperature() {
      this.changeSensor(7)
      this.sensorName = '土壤温度'
      this.unitName = '土壤温度(℃)'
      this.drawData('土壤温度', '土壤温度(℃)')
    },
    clicSoilMoisture() {
      this.changeSensor(8)
      this.sensorName = '土壤湿度'
      this.unitName = '土壤湿度(%)'
      this.drawData('土壤湿度', '土壤湿度(%)')
    },
    clickSoilConductivity() {
      this.changeSensor(9)
      this.sensorName = '土壤水分'
      this.unitName = '土壤导电率(us/cm)'
      this.drawData('土壤水分', '土壤导电率(us/cm)')
    },
    ChangeTimeValue() {
      this.drawData(this.sensorName, this.unitName)
    },
    viewHistory() {
      console.log('this is history')
      this.$router.push(`/atmWatch/history/${this.value1}`)
    },
    custom() {
      console.log('this is custom')
      console.log(this.value2)
    },
    searchTime() {
      const DataToData = {
        // endTime:  this.timeTotime[1],
        // startTime: this.timeTotime[0],
        endTime: '2020-09-11 16:00:00',
        startTime: '2020-09-11 12:00:00',
        gatewayAddress: this.value2.gatewayAddress,
        sensorName: this.sensorName
      }
      getSensorHistoryByDate(DataToData).then(res => {
        this.data = []
        this.date = []
        for (let i = 0; i < res.data.length; i++) {
          this.data.push(res.data[i].value)
          this.date.push(res.data[i].dataTime)
        }
        this.drawchart(this.unitName)
      })
    },
    drawData(sensorName, unitName) {
      let SensorData = {
        hours: this.optionHours,
        gatewayAddress: this.value2.gatewayAddress,
        sensorName: sensorName
      }
      getSensorHistoryByTime(SensorData).then(res => {
        this.data = []
        this.date = []
        for (let i = 0; i < res.data.length; i++) {
          this.data.push(res.data[i].value)
          this.date.push(res.data[i].dataTime)
        }
        this.drawchart(unitName)
      })
    }
  }
}
</script>
<style> 
.display-row{
  display: flex;
}
.each-col{
    display:inline-block;
    width:10%;
    cursor:pointer;
}
.each-col-acitive{
    color:white;
    background:#008EEF;
}
.features{
    height:110px;
    text-align:center;
    box-shadow:0px 0px 1px gray inset;
}
.features:hover{box-shadow:0px 0px 10px #ddd inset;}
.features-title{font-family:微软雅黑;font-weight:bold;padding-top:25px;}
.features-value{font-family:微软雅黑;font-weight:bold;font-size:20px;color:#008EEF;}
.features-value-active{color:white;}

.air-temperature{
    background:url('../../../images/monitor/1.png');
    background-repeat:no-repeat;
    background-position:bottom right;
    background-size:30%;
}
.air-temperature:hover{
    background:url('../../../images/monitor/1-hover.png');
    background-repeat:no-repeat;
    background-position:bottom right;
    background-size:30%;
}
.air-humidity{
    background:url('../../../images/monitor/2.png');
    background-repeat:no-repeat;
    background-position:bottom right;
    background-size:30%;
}
.air-humidity:hover{
    background:url('../../../images/monitor/2-hover.png');
    background-repeat:no-repeat;
    background-position:bottom right;
    background-size:30%;
}
.air-pressure{
    background:url('../../../images/monitor/3.png');
    background-repeat:no-repeat;
    background-position:bottom right;
    background-size:30%;
}
.air-pressure:hover{
    background:url('../../../images/monitor/3-hover.png');
    background-repeat:no-repeat;
    background-position:bottom right;
    background-size:30%;
}
.light-intensity{
    background:url('../../../images/monitor/4.png');
    background-repeat:no-repeat;
    background-position:bottom right;
    background-size:30%;
}
.light-intensity:hover{
    background:url('../../../images/monitor/4-hover.png');
    background-repeat:no-repeat;
    background-position:bottom right;
    background-size:30%;
}
.wind-direction{
    background:url('../../../images/monitor/5.png');
    background-repeat:no-repeat;
    background-position:bottom right;
    background-size:30%;
}
.wind-direction:hover{
    background:url('../../../images/monitor/5-hover.png');
    background-repeat:no-repeat;
    background-position:bottom right;
    background-size:30%;
}
.wind-speed{
    background:url('../../../images/monitor/6.png');
    background-repeat:no-repeat;
    background-position:bottom right;
    background-size:30%;
}
.wind-speed:hover{
    background:url('../../../images/monitor/6-hover.png');
    background-repeat:no-repeat;
    background-position:bottom right;
    background-size:30%;
}
.rainfall{
    background:url('../../../images/monitor/7.png');
    background-repeat:no-repeat;
    background-position:bottom right;
    background-size:30%;
}
.rainfall:hover{
    background:url('../../../images/monitor/7-hover.png');
    background-repeat:no-repeat;
    background-position:bottom right;
    background-size:30%;
}
.soil-temperature{
    background:url('../../../images/monitor/8.png');
    background-repeat:no-repeat;
    background-position:bottom right;
    background-size:30%;
}
.soil-temperature:hover{
    background:url('../../../images/monitor/8-hover.png');
    background-repeat:no-repeat;
    background-position:bottom right;
    background-size:30%;
}
.soil-moisture{
    background:url('../../../images/monitor/9.png');
    background-repeat:no-repeat;
    background-position:bottom right;
    background-size:30%;
}
.soil-moisture:hover{
    background:url('../../../images/monitor/9-hover.png');
    background-repeat:no-repeat;
    background-position:bottom right;
    background-size:30%;
}
.soil-conductivity{
    background:url('../../../images/monitor/10.png');
    background-repeat:no-repeat;
    background-position:bottom right;
    background-size:30%;
}
.soil-conductivity:hover{
    background:url('../../../images/monitor/10-hover.png');
    background-repeat:no-repeat;
    background-position:bottom right;
    background-size:30%;
}
</style>
